import { useEffect, useMemo } from 'react';
import { Button, Tooltip } from '@feewee/h5app-common';
import RowItem, { IRow } from '@/routes/demo/components/RowItem';

const Index = () => {
  const data: IRow[] = useMemo(
    () => [
      {
        tittle: '节点1',
        key: '1',
        children: [
          {
            tittle: '节点1-1',
            key: '1-1',
            children: [{ tittle: '节点1-1-1', key: '1-1-1' }],
          },
          {
            tittle: '节点1-2',
            key: '1-2',
            children: [
              { tittle: '节点1-2-1', key: '1-2-1' },
              { tittle: '节点1-2-2', key: '1-2-2' },
            ],
          },
        ],
      },
      {
        tittle: '节点2',
        key: '2',
        children: [
          { tittle: '节点2-1', key: '2-1' },
          { tittle: '节点2-2', key: '2-2' },
          { tittle: '节点2-3', key: '2-3' },
        ],
      },
      {
        tittle: '节点3',
        key: '3',
        children: [
          { tittle: '节点3-1', key: '3-1' },
          { tittle: '节点3-2', key: '3-2' },
          { tittle: '节点3-3', key: '3-3' },
        ],
      },
    ],
    [],
  );

  useEffect(() => {
    console.info('init');
  }, []);

  return (
    <div className="p-8">
      <div className="flex flex-col">
        {data.map(item => (
          <RowItem
            item={item}
            key={item.key}
            sigle={(item?.children?.length ?? 0) <= 1}
          />
        ))}
      </div>
      <Tooltip text="你好，世界">
        <Button type="primary">测试</Button>
      </Tooltip>
    </div>
  );
};

export default Index;
